<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入二维码生成的js -->
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

<title>二维码生成</title>
</head>
<body>


<h3>使用canvas方式对图片进行渲染</h3>
<div id="code1"></div> 
<h3>从数据库拿取数据生成二维码</h3>
<div id="qrcode1"></div> 
<img id="img" width="200px" height="200px"/>
</body>

<script type="text/javascript">
$(function() {
	//canvas方式对图片进行渲染
	$('#code1').qrcode("http://www.baidu.com"); //任意字符串 
	
	//用数据库的数据生成二维码
	initQrcode();
})
	
function initQrcode() {
	$.ajax({
		url:getProtocolAndHost() + '/QrcodeController.do?getUserInfo',
		type:"POST",
		data:{
			id:'c9bce99f-f221-11e8-a568-00163e0addc7'
		},
		success: function (data) { 
			var resultData = JSON.parse(data);
			var userInfo = resultData.rows;
			onGenerationCode(userInfo);
		}
	})
}
	
//显示名二维码
function displayQrcode(a){
	var qrcode1 = jQuery('#qrcode1').qrcode({
        width:100,
		height:100,
		render:"canvas", //设置渲染方式 table canvas
		typeNumber : -1,  //计算模式 
		correctLevel  : 0,//纠错等级 
		background   : "#ffffff",//背景颜色 
		foreground   : "#000000",//前景颜色 
		text:a
    }).hide();
    //将二维码转换成img图片
	 var canvas=qrcode1.find('canvas').get(0);  
	 $('#img').attr('src',canvas.toDataURL('image/jpg'))  
}

//生成二维码所需数据
function onGenerationCode (userInfo) {
	var that=this;
	//用于拼接的text字段
	var b = userInfo.username,//"陈发",                /*填入姓名*/
	c = userInfo.companyname,//"公司",				   /*填入公司*/
    d = userInfo.post,//"码农",                /*填入职位*/
    e = userInfo.address,//"北京市五环区GT路19号", /*填入工作地址*/
    g = userInfo.phone,//"159351111111",        /*填入手机电话*/
    h = userInfo.qq,//"010-6666666",		   /*填入qq*/
    i = userInfo.wechat,//"www.chenfa.com",	   /*填入微信*/
    j = userInfo.email//"253413617@qq.com";	   /*填入邮箱*/
       
	a = "BEGIN:VCARD", 
    a += "\r\nFN: " + b, d && (a += "\r\nTITLE:" + d),
    a += "\r\nORG:" + c,
    e && (a += "\r\nADR;WORK:;;" + e + ";;;;"), g && (a += "\r\nTEL;CELL,VOICE:" + g),
    h && (a += "\r\nTEL;WORK,VOICE:" + h), i && (a += "\r\nURL;WORK:" + i), j && (a += "\r\nEMAIL;INTERNET,HOME:" + j),
    a += "\r\nEND:VCARD";

	a =that.toUtf8(a);
	displayQrcode(a);
}
	
//将字符串装换为utf8格式数据
function toUtf8(str) {    
   var out, i, len, c;    
   out = "";    
   len = str.length;    
   for(i = 0; i < len; i++) {    
       c = str.charCodeAt(i);    
       if ((c >= 0x0001) && (c <= 0x007F)) {    
           out += str.charAt(i);    
       } else if (c > 0x07FF) {    
           out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
           out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
           out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
       } else {    
           out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
           out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
       }    
   }    
   return out;    
}

//端口控制方法
function getProtocolAndHost(){
	var protocolStr = document.location.protocol;//协议 http或https
	 var host;
	 var addressURLs;
	 var port = location.port;
	 host= location.hostname;//location.host;//127.0.0.1:8080 主机+端口
	 addressURLs=protocolStr+"//"+host+":8080"+"/qrcode";
	 return addressURLs;
}
</script>
</html>